<template>
    <div class="bigHigh_box">
        <TopOne :obj="obj" :getYao="getYao" :datalist="datalist" />
        <div class="customTodo_body">
            <TopTwo :todoButton="todoButton" />
            <el-table :data="tableData" style="width: 100%" highlight-current-row="true"
                @selection-change="handleSelectionChange" ref="multipleTable">
                <el-table-column type="selection">
                </el-table-column>
                <el-table-column prop="type" label="客户名称">
                </el-table-column>
                <el-table-column prop="iSwhy" label="客户状态">
                </el-table-column>
                <el-table-column prop="startTime" label="客户星级" sortable>
                </el-table-column>
                <el-table-column prop="endTime" label="首联系人" sortable>
                </el-table-column>
                <el-table-column prop="dayLong" label="手机号码" sortable>
                </el-table-column>
                <el-table-column prop="tiTime" label="最后跟进" sortable>
                </el-table-column>
                <el-table-column prop="done" label="审批状态">
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <RouterLink :to="`/home/please/dalite?id=${scope.row.id}&&type=请假申请`">🗐详情</RouterLink>
                        <!-- <el-button @click="handleEdit(scope.row)" type="text"></el-button> -->
                        <el-button type="text" @click="handleDelete(scope.row.id)">🗑︎删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup lang="ts">

import TopOne from '../../components/topOne.vue'
import TopTwo from '../../components/topTwo.vue';
import axios from 'axios';
import { onMounted, ref } from 'vue';
// import {useRouter} from 'vue-router'
// 传给第一个input框的数据
const obj = {
    // 第一个输入框
    inputOne: {
        done: true,
        tishi: '搜索关键词',
    },
    // 后面倒数第二个带小人的输入框
    inputTwo: {
        done: true,
        tishi: "客户状态"
    },
    // 日历输入框
    inputThere: {
        done: true,
        tishi: '客户类型'
    },
    // 3个下拉列表
    selectOne: {
        done: true,
        tishi: '客户星级',
        todoDone: [
            {
                value: '已通过',
                label: '已通过',
            },
            {
                value: '待审批',
                label: '待审批',
            }
        ]
    },
    selectTwo: {
        done: true,
        tishi: '最后跟进',
        todoDone: [
            {
                value: '已通过',
                label: '已通过',
            },
            {
                value: '未通过',
                label: '未通过',
            },

        ]
    },
    selectThere: {
        done: false,
        tishi: '客户星级',
        todoDone: [
            {
                label: '⭐',
                value: '1',
            },
            {
                label: '⭐⭐',
                value: '2',
            },
            {
                label: '⭐⭐⭐',
                value: '3',
            },
        ]
    }
}
// 获取到input的数据
function getYao(value: any) {
    if (value.inputOne) {
        tableData.value = tableData.value.filter((item: any) => {
            if (item.iSwhy.indexOf(value.inputOne) != -1) {
                return item
            }
        })
        
    }
    if (value.selectOne) {
        tableData.value = tableData.value.filter((item: any) => {
            if (item.done.indexOf(value.selectOne) != -1) {
                return item
            }
        })
    }
    console.log(value, '头部请求获取到的');
}
// 传给一排按钮的数据+方法
const todoButton = [
    { id: 1, name: '➕︎添加', fn: addOne },
    { id: 2, name: '⬇导入' },
    { id: 3, name: '⬆导出' },
    {id:4,name:'🗊新建任务'},
    {id:5,name:'🗘转移客户'},
    {id:6,name:'🕴移入公海'},
    {id:7,name:'⛙合并客户'},
    {id:8,name:'🖊︎批量编辑'},
]
// 给按钮绑定事件
function addOne() {
    console.log("添加");
}
// import axios from 'axios';
let tableData = ref()

// 获取数据
// onMounted(() => {
//     datalist()
// });
// let datalist = async () => {
//     try {
//         // 执行异步操作，获取外部数据
//         const response = await fetch('http://localhost:3000/oneTodo');
//         const data = await response.json();
//         console.log(data, '-----data');

//         // 对获取到的数据进行处理
//         tableData.value = data.data;
//     } catch (error) {
//         console.error(error);
//     }
// }


// 表格按钮
// let rou=useRouter()
// function handleEdit(am: any) {
//     rou.push('/home/please/dalite') 
//     console.log(am, "am");
// }
let handleDelete = async (index: number) => {
    try {
        const response = await axios.post('http://localhost:3000/del', { key: `${index}` });
        console.log('POST 请求成功:', response.data);
        datalist()
    } catch (error) {
        console.error('POST 请求失败:', error);
    }
}

let multipleSelection = ref([])
function handleSelectionChange(val: any) {
    multipleSelection.value = val;
}
</script>

<style scoped></style>